<template>
  <div ref="charts" style="width: 400px;height:300px;" />
</template>
<script>
require('echarts/theme/macarons')
import * as echarts from 'echarts'
import { getloginStatisticsAPI, getOnlineStatisticsAPI } from '@/api/dashBoardAPI.js'
export default {
  name: 'LoginStaticChart',
  data() {
    return {
      time: [],
      loginSum: [],
      onlineSum: []
    }
  },
  created() {
    this.getStatistics()
  },
  mounted() {
  },
  methods: {

    /**
     * 折线图初始化
     */
    initChart() {
      const charts = this.$refs.charts
      var myChart = echarts.init(charts)
      // 绘制图表
      myChart.setOption(
        {
          title: {
            text: '登陆趋势',
            textStyle: {
              fontSize: 20,
              fontFamily: 'Microsoft Yahei',
              fontWeight: 'bold',
              color: '#fbffff'
            }
          },
          legend: {
            data: ['登录人数', '在线人数'],
            textStyle: {
              color: '#fbffff'
            }
          },
          toolbox: {
            feature: {
              saveAsImage: { show: true }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            name: '时间',
            type: 'category',
            boundaryGap: false,
            data: this.time,
            axisLine: {
              lineStyle: {
                color: '#fbffff'
              }
            }
          },
          yAxis: {
            name: '登录人数',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fbffff'
              }
            },
            axisLabel: {
              formatter: '{value}人'
            }
          },
          series: [
            {
              name: '登录人数',
              type: 'line',
              stack: 'Total',
              data: this.loginSum,
              tooltip: {
                valueFormatter: function(value) {
                  return value + '人'
                }
              }

              // smooth: true
            },
            {
              name: '在线人数',
              type: 'line',
              stack: 'Total',
              tooltip: {
                valueFormatter: function(value) {
                  return value + '人'
                }
              },
              data: this.onlineSum
              // smooth: true
            }

          ]
        }
      )
    },
    /**
     * 获取折线图数据
     */
    getStatistics() {
      // 获取登录人数信息
      getloginStatisticsAPI().then(res => {
        if (res) {
          const { LoginStatistics } = res
          LoginStatistics.map(item => {
            this.time.push(item.time + '时')
            this.loginSum.push(item.value)
          })
          // 获取在线人数信息
          getOnlineStatisticsAPI().then(Response => {
            if (Response) {
              const { OnlineStatistics } = Response
              OnlineStatistics.map(item => {
                this.onlineSum.push(item.value)
              })
              this.initChart()
            }
          })
          // console.log(res)
        }
      })
    }
  }
}

</script>
<style scoped>
</style>
